<template>
	<div class="app-container">
		<SearchContent
			:queryParams="queryParams"
			@query="handleQuery"
			@reset="resetQuery">
			<el-col :span="6">
				<el-form-item label="订单编号:" prop="orderCode">
					<el-input
						v-model="queryParams.orderCode"
						clearable
						placeholder="请输入订单编号"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="额度申请编号:" prop="calcSchemeCode">
					<el-input
						v-model="queryParams.calcSchemeCode"
						clearable
						placeholder="请输入额度申请编号"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="采购编号:" prop="purchaseNo">
					<el-input
						v-model="queryParams.purchaseNo"
						clearable
						placeholder="请输入采购编号"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="订单状态:" prop="orderStatus">
					<el-select v-model="queryParams.orderStatus" clearable>
						<template v-for="dict in dict.type.order_status">
							<el-option
								:label="dict.label"
								:value="dict.value"
								:key="dict.value"></el-option>
						</template>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="出租方:" prop="lessorId">
					<el-select v-model="queryParams.lessorId" clearable>
						<template v-for="dict in rentOutList">
							<el-option
								:label="dict.deptName"
								:value="dict.deptId"
								:key="dict.deptId"></el-option>
						</template>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="承租方:" prop="leaseeId">
					<el-select
						v-model="queryParams.leaseeId"
						clearable
						filterable>
						<template v-for="dict in CustomerList">
							<el-option
								:label="dict.customerName"
								:value="dict.customerId"
								:key="dict.customerId"></el-option>
						</template>
					</el-select>
				</el-form-item>
			</el-col>
		</SearchContent>

		<div class="card-wrap card-padding">
			<table-page
				:loading="loading"
				:dataList="dataList"
				border
				:total="total"
				:page.sync="queryParams.pageNum"
				:limit.sync="queryParams.pageSize"
				@setSizeCurrent="getList">
				<!-- 操作插槽 -->
				<template slot="tableColAc">
					<el-table-column
						label="操作"
						width="300"
						align="center"
						class-name="small-padding fixed-width">
						<template slot-scope="scope">
							<el-button
								type="text"
								v-if="
									scope.row.flowStatus !== '3' &&
									scope.row.flowStatus !== '2'
								"
								@click="edit(scope.row)"
								v-hasPermi="['orderManagement:orderView:edit']">
								编辑
							</el-button>
							<el-button
								type="text"
								@click="orderDetail(scope.row)"
								v-hasPermi="[
									'orderManagement:orderView:detail',
								]">
								订单详情
							</el-button>
							<el-button
								type="text"
								@click="suborder(scope.row)"
								v-hasPermi="[
									'orderManagement:orderView:suborder',
								]">
								子订单
							</el-button>
							<el-button
								type="text"
								@click="generateContract(scope.row)"
								v-if="scope.row.orderStatus == '10'"
								v-hasPermi="['orderManagement:orderView:ssHt']">
								生成合同
							</el-button>
							<!-- <el-button -->
							<!-- type="text" -->
							<!-- @click=" -->
							<!-- _toPage({ -->
							<!-- name: 'MainRawSign', -->
							<!-- }) -->
							<!-- " -->
							<!-- v-hasPermi="['orderManagement:orderView:raw']"> -->
							<!-- 原车续签 -->
							<!-- </el-button> -->
							<!-- <el-button -->
							<!-- type="text" -->
							<!-- @click=" -->
							<!-- _toPage({ -->
							<!-- name: 'MainChangeSign', -->
							<!-- }) -->
							<!-- " -->
							<!-- v-hasPermi="[ -->
							<!-- 'orderManagement:orderView:change', -->
							<!-- ]"> -->
							<!-- 换车续签 -->
							<!-- </el-button> -->
							<!--  -->
							<el-button
								v-if="scope.row.orderChangeBtn == '1'"
								type="text"
								@click="
									_toPage({
										path: '/vehicleOrder/orderManagement/contractChange',
										name: 'ContractChange',
										query: {
											orderId: scope.row.orderId,
										},
									})
								"
								v-hasPermi="[
									'orderManagement:orderView:contract',
								]">
								合同变更
							</el-button>
						</template>
					</el-table-column>
				</template>
				<!-- 普通列插槽 -->
				<template slot="tableCol">
					<el-table-column
						label="订单状态"
						align="center"
						prop="orderStatusStr"
						min-width="100px"
						show-overflow-tooltip />
					<el-table-column
						label="订单审批状态"
						align="center"
						prop="flowStatusStr"
						min-width="160px"
						show-overflow-tooltip />
					<el-table-column
						label="额度申请编号"
						align="center"
						min-width="160px"
						show-overflow-tooltip
						prop="calcSchemeCode">
						<template slot-scope="scope">
							<span
								@click="
									goToDetail(
										scope.row.calcSchemeId,
										scope.row.processId,
									)
								"
								style="color: #1890ff; cursor: pointer">
								{{ scope.row.calcSchemeCode }}
							</span>
						</template>
					</el-table-column>

					<el-table-column
						label="订单编号"
						align="center"
						min-width="160px"
						show-overflow-tooltip
						prop="orderCode" />
					<el-table-column
						label="采购编号"
						align="center"
						min-width="200px"
						show-overflow-tooltip
						prop="purchaseNo">
						<template slot-scope="scope">
							<span
								@click="goToDetailCg(scope.row.purchaseOrderId)"
								style="color: #1890ff; cursor: pointer">
								{{ scope.row.purchaseNo }}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						label="出租方"
						align="center"
						prop="lessorName"
						min-width="160px"
						show-overflow-tooltip />
					<el-table-column
						label="承租方"
						align="center"
						prop="leaseeName"
						min-width="160px"
						show-overflow-tooltip />
					<el-table-column
						label="交车总数量"
						align="center"
						prop="quantityDelivery"
						min-width="90px"
						show-overflow-tooltip />
					<el-table-column
						label="已交车数量"
						align="center"
						prop="quantityDelivered"
						min-width="90px"
						show-overflow-tooltip />
					<el-table-column
						label="未交车数量"
						align="center"
						prop="quantityUndelivered"
						min-width="90px"
						show-overflow-tooltip />
				</template>
			</table-page>
		</div>
	</div>
</template>

<script>
	import SearchContent from '@/components/SearchContent/index.vue';
	import {
		getOrderListManage,
		getListNoPermission,
		getGenerateContract,
	} from '@/api/vehicleOrder';
	import { getCustomerList } from '@/api/memberManage/memberList';
	export default {
		name: 'OrderView',
		components: {
			SearchContent,
		},
		dicts: ['order_status'],
		data() {
			return {
				// 遮罩层
				loading: true,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				total: 0,
				dataList: [],
				// 表单参数
				form: {},
				rentOutList: [],
				CustomerList: [],
			};
		},
		created() {
			this.getList();
			this.getListNoPermission();
			this.getCustomerList();
		},
		methods: {
			goToDetail(calcSchemeId) {
				this._toPage({
					path: '/quota/ApplyDetails',
					query: {
						calcSchemeId,
					},
				});
			},
			goToDetailCg(purchaseOrderId) {
				this._toPage({
					name: 'PurchaseAdd',
					query: {
						purchaseOrderId: purchaseOrderId,
						type: 'detail',
						pageType: '采购详情',
					},
				});
			},
			generateContract(row) {
				getGenerateContract(row.orderId).then(res => {
					this.$message({
						message: '生成合同',
						type: 'success',
					});
					this.getList();
				});
			},
			async getCustomerList() {
				let params = {
					pageNum: 1,
					pageSize: 10000,
				};
				try {
					let res = await getCustomerList(params);
					this.CustomerList = res.rows;
				} catch (error) {}
			},
			async getListNoPermission() {
				try {
					let res = await getListNoPermission();
					this.rentOutList = res.data;
				} catch (error) {}
			},
			// 编辑
			edit(row) {
				this._toPage({
					name: 'PlaceOrderAdd',
					query: {
						immunityAuditType: row.immunityAuditType,
						rentType: row.rentType,
						type: row.carSourceTypeStr == '现有' ? 2 : 1,
						beFrom: 'OrderView',
						orderId: row.orderId,
						preOrderId: row.preOrderId,
						leaseeId: row.leaseeId == -1 ? null : row.leaseeId,
						lessorId: row.lessorId == -1 ? null : row.lessorId,
						sourceBusinessType: row.sourceBusinessType,
						leaseContractTemplateId: row.leaseContractTemplateId,
						isMenu: this.$route.query.isMenu,
						calcSchemeCode: row.calcSchemeCode,
						calcSchemeId: row.calcSchemeId,
						applicationNo: row.applicationNo,
					},
				});
			},
			// 子订单
			suborder(row) {
				this._toPage({
					name: 'SuborderView',
					query: {
						orderId: row.orderId,
						isMenu: this.$route.query.isMenu,
					},
				});
			},
			// 订单详情
			orderDetail(row) {
				this._toPage({
					name: 'OrderDetails',
					query: {
						type: row.carType,
						beFrom: 'OrderView',
						orderId: row.orderId,
						preOrderId: row.preOrderId,
						calcSchemeId: row.calcSchemeId,
						isMenu: this.$route.query.isMenu,
					},
				});
			},
			/** 查询测试单表列表 */
			getList() {
				this.loading = true;
				this.queryParams.preOrderId = this.$route.query.preOrderId
					? this.$route.query.preOrderId
					: '';
				getOrderListManage(this.queryParams).then(res => {
					if (res.code == '200') {
						const { rows, total } = res;
						this.dataList = rows;
						this.total = total;
						this.loading = false;
					}
				});
			},
			reset() {
				this.form = {
					includeStart: 0,
					includeEnd: 1,
				};
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},

			/** 重置按钮操作 */
			resetQuery() {
				(this.queryParams = {
					pageNum: 1,
					pageSize: 10,
				}),
					this.handleQuery();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.pagination-container {
		padding: 0 20px 50px !important;
	}

	.form-dialog {
		::v-deep .el-dialog__header {
			padding: 10px 20px;
			border-bottom: 1px solid #dcdfe6;

			.el-dialog__headerbtn {
				top: 15px;
			}
		}

		.box-card {
			margin-bottom: 20px;

			.card-title {
				font-size: 16px;
				position: relative;
				margin-left: 8px;
				padding: 0;
			}

			.card-title::after {
				content: '';
				width: 4px;
				height: 18px;
				background-color: aqua;
				display: block;
				position: absolute;
				left: -12px;
				top: 2px;
			}
		}
	}
</style>
